import React from "react";
import { useReducer } from "react";
import { useState } from "react";
import { useRef } from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Disk from "../../components/core/Disk/Disk";
import Progress from "../../components/core/Progress/Progress";
import {
  AUDIO_STATUS_PAUSED,
  AUDIO_STATUS_PLAYED,
  AUDIO_STATUS_STOPED,
} from "../../models/audio";
import { IHotSong } from "../../store/actions/hotsongs.action";
import { getSongDetail } from "../../store/actions/songdetail.action";
import { getSongUrl, ISongUrl } from "../../store/actions/songurl.action";
import { AppStore } from "../../store/reducers";
import "./detail.css";

const songId = "1804320463";

const Detail = () => {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [currentTime, setCurrentTime] = useState<number>(0);
  const [totalTime, setTotalTime] = useState<number>(0);

  const [audioStatus, setAudioStatus] = useReducer(
    (state: any, action: string) => {
      switch (action) {
        case AUDIO_STATUS_PAUSED:
          audioRef && audioRef.current && audioRef.current.pause();
          return AUDIO_STATUS_PAUSED;
        case AUDIO_STATUS_PLAYED:
          audioRef && audioRef.current && audioRef.current.play();
          return AUDIO_STATUS_PLAYED;
        default:
          audioRef && audioRef.current && audioRef.current.pause();
          return AUDIO_STATUS_STOPED;
      }
    },
    AUDIO_STATUS_STOPED
  );
  const processVal = useSelector<AppStore, string>((state) => state.process);
  const songDetail = useSelector<AppStore, IHotSong>(
    (state) => state.songDetail
  );
  const songUrl = useSelector<AppStore, ISongUrl>((state) => state.songUrl);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getSongDetail(songId));
    dispatch(getSongUrl(songId));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  // console.log("detail--->", audioStatus, audioRef);

  useEffect(() => {
    if (songUrl.url) {
      if (audioRef && audioRef.current) {
        audioRef.current.src = songUrl.url;
      }
    }
  }, [songUrl.url]);
  useEffect(() => {
    if (audioRef.current) {
      setTotalTime(audioRef.current.duration);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [audioRef.current]);
  useEffect(() => {
    const timer = setInterval(() => {
      if (audioRef && audioRef.current) {
        setCurrentTime(audioRef.current.currentTime);
        setTotalTime(audioRef.current.duration);
      }
    }, 500);
    return () => clearInterval(timer);
  }, [currentTime]);
  useEffect(() => {
    // console.log("processVal--->", processVal);
    const tempCurrentTime: number =
      (totalTime / 100) * Number(processVal.substr(0, processVal.indexOf("%")));
    if (!isNaN(tempCurrentTime) && audioRef.current) {
      audioRef.current.load();
      audioRef.current.currentTime = Math.floor(tempCurrentTime);
    }
  }, [processVal, totalTime]);
  const handlePlayed = () => {
    if (audioRef.current) {
      if (audioRef.current.paused) {
        setAudioStatus(AUDIO_STATUS_PLAYED);
      } else {
        setAudioStatus(AUDIO_STATUS_PAUSED);
      }
    }
  };
  return (
    <div className="detail">
      {songDetail.name ? (
        <Disk
          audioStatus={audioStatus}
          onClick={handlePlayed}
          imageUrl={songDetail.al.picUrl}
        />
      ) : null}
      {songUrl.url ? (
        <div>
          <audio controls ref={audioRef} autoPlay></audio>
        </div>
      ) : null}
      <Progress totalSeconds={totalTime} currentSecond={currentTime} />
    </div>
  );
};

export default Detail;
